<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Phaser 3</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="shortcut icon" href="./images/favicon.ico" type="image/x-icon" />
    <script src="./js/getQueryString.js"></script>
    <script src="./js/jquery-3.1.1.min.js"></script>
    <script src="./js/datgui.js"></script>        
    <script src="./js/TweenMax.min.js"></script> 
    <style type="text/css">
        body {
            margin: 0;
        }

        #feedback {
            width: 600px;
            margin: 0px 0px 0px 32px;
            font: 14px Arial;
            padding: 20px;
            background-color: #efefef;
            box-shadow: 0 5px 3px rgba(0, 0, 0, 0.3);
        }

        #feedback textarea {
            font: Courier;
            width: 500px;
            height: 100px;
            border: 1px solid black;
        }

        #nav {
            display: none;
            width: 1000px;
            height: 60px;
            margin: 32px 0px 0px 32px;
        }

        #nav a, #nav select {
            background: linear-gradient(135deg, #e570e7 0%,#79f1fc 100%);
            text-align: center;
            font-family: Helvetica, Arial;
            letter-spacing: 1px;
            text-decoration: none;
            box-shadow: 0 5px 3px rgba(0, 0, 0, 0.7);
            outline: none;
            margin-right: 64px;
            padding: 10px 20px;
            color: #2d2d2d;
            width: 200px;
        }

        #nav a:Hover {
            text-decoration: underline;
            color: #fff;
        }

    </style>
</head>

<body>

    <div id="phaser-example"></div>

    <p id="loading">Please wait, loading Phaser build ...</p>

    <div id="nav">

        <a id="backlink">&lt; Back</a>
        <a id="editlink">Edit</a>
        <a href="https://github.com/photonstorm/phaser3-examples/issues">Open Issue</a>

    </div>

    <p id="feedback">
        Phaser 3 is still very new and there are lots of Examples which may not work due to 
        changes in the API during development. If this is such an example, then we're really
        sorry! Please help us by clicking the 'Open Issue' button above and pasting in the URL
        of the example, and we'll fix it (or remove it) as soon as we can.
    </p>

    <script type="text/javascript">
    $(document).ready(function () {

        var filename = getQueryString('src');
        var phaserVersion = getQueryString('v', 'dev');
        var phaserVersionJS = getQueryString('v', 'dev') + '.js';

        if (filename.substr(-3) === '.js')
        {
            //  Prepare the links and Feedback form before we run the example
            var parts = filename.split('\\');
            parts.pop();
            parts.shift();
            backURL = parts.join('/') + '/';

            document.title = document.title.concat(' :: ' + filename);

            $('#editlink').attr('href', 'edit.html?src=' + filename);
            $('#backlink').attr('href', 'index.html?dir=' + backURL);

            var versions = [
                { val : 'dev', text: 'Dev Build' },
                { val : '3.4.0', text: '3.4.0' },
                { val : '3.3.0', text: '3.3.0' },
                { val : '3.2.1', text: '3.2.1' },
                { val : '3.2.0', text: '3.2.0' },
                { val : '3.1.2', text: '3.1.2' },
                { val : '3.1.1', text: '3.1.1' },
                { val : '3.1.0', text: '3.1.0' },
                { val : '3.0.0', text: '3.0.0' }
            ];

            var versionlist = $('<select>').prop('id', 'changeversion').appendTo('#nav');

            versionlist.on('change', function () {

                document.location.href = 'view.html?src=' + filename + '&v=' + this.value;

            });

            var selected = false;

            versions.forEach(function(item) {

                if (item.val === phaserVersion)
                {
                    versionlist.append($("<option>").prop('value', item.val).prop('selected', true).text(item.text));
                    selected = true;
                }
                else
                {
                    versionlist.append($("<option>").prop('value', item.val).text(item.text));
                }

            });

            if (!selected)
            {
                versionlist.append($("<option>").prop('value', phaserVersion).prop('selected', true).text('Custom: ' + phaserVersion));
            }

            //  Load Phaser

            var phaserScript = document.createElement('script');

            phaserScript.type = 'text/javascript';
            phaserScript.async = true;

            phaserScript.onload = function ()
            {
                //  Inject the example source
                var s = document.createElement('script');
                s.type = 'text/javascript';
                s.src = decodeURI(filename).split('\\').join('/');
                document.body.appendChild(s);

                $('#loading').hide();
                $('#nav').show();
            };

            phaserScript.src = './build/' + phaserVersionJS;

            document.body.appendChild(phaserScript);
        }

    });
    </script>

</body>
</html>
